<template>
  <view class="p-specifications">
    <view :class="['title', {bold}]">{{title}}</view>
    <view class="content">{{ attrStr }}</view>
    <view class="icon">
      <x-icon name="icon-017" size="24" color="#999999" />
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PService',
  components: {
    XIcon
  },
  props: {
    attrList: {
      type: [Array, null],
      default: () => []
    },
    bold: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '服务'
    }
  },
  data() {
    return {};
  },
  computed: {
    attrStr() {
      const specificValue = '运费险';
      if (this.attrList && this.attrList.length) {
        const list = this.attrList;
        list.sort((a, b) => {
          if (a.dictNote === specificValue) {
            return -1;
          } else if (b.dictNote === specificValue) {
            return 1;
          } else {
            return a.sortNum - b.sortNum;
          }
        });

        return list.map(item => item.dictNote).join('·');
      } else {
        return '';
      }
    }
  },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
.p-specifications{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30px;
  .title{
    color: #888888;
    &.bold{
      font-weight: 500;
    }
  }
  .content{
    padding: 0 20px;
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .icon{
    width: 24px;
    height: 24px;
  }
}
</style>
